/**
 * @author Haidar Osman
 */

var UniRelation = function(fromClass, toClass, relationObj) {
	this.fromClass = fromClass;
	this.toClass = toClass;
	this.relationObj = relationObj;
	var that = this;
	// this.relationObj=relationObj;
	this.group = new Kinetic.Group({

	});

	var points = [{
		x : this.fromClass.headerRect.getAbsolutePosition().x,
		y : this.fromClass.headerRect.getAbsolutePosition().y
	}, {
		x : this.toClass.headerRect.getAbsolutePosition().x,
		y : this.toClass.headerRect.getAbsolutePosition().y
	}, {
		x : this.toClass.headerRect.getAbsolutePosition().x,
		y : this.toClass.headerRect.getAbsolutePosition().y
	}, {
		x : this.toClass.headerRect.getAbsolutePosition().x,
		y : this.toClass.headerRect.getAbsolutePosition().y
	}, {
		x : this.toClass.headerRect.getAbsolutePosition().x,
		y : this.toClass.headerRect.getAbsolutePosition().y
	}, {
		x : this.toClass.headerRect.getAbsolutePosition().x,
		y : this.toClass.headerRect.getAbsolutePosition().y
	}];
	this.relationLine = new Kinetic.Polygon({
		points : points,
		fill : styles.classHeaderRectStrokeColor,
		stroke : styles.classHeaderRectStrokeColor,
		strokeWidth : 1
	});
	this.title = new Kinetic.Text({
		x : (points[0].x + points[1].x) / 2,
		y : (points[0].y + points[1].y) / 2,
		text : that.relationObj.title,
		fontSize : 10,
		fontFamily : "Calibri",
		textFill : styles.classHeaderRectStrokeColor,
		fill : "white",
		// textStroke : "#444",
		padding : 3,
		stroke : "black",
		align : "middle",
		verticalAlign : "middle",
		draggable : true,
		visible : true
		// name : header
	});
	this.group.add(this.relationLine);
	this.group.add(this.title);
	// this.fromClass.outgoingRelations.addRelation(this);
	// this.toClass.incomingRelations.addRelation(this);
	this.update = function() {
		var X1, X2, Y1, Y2;
		var x1 = this.fromClass.headerRect.getAbsolutePosition().x;
		var x2 = this.fromClass.headerRect.getAbsolutePosition().x + this.fromClass.headerRect.width;
		var x3 = this.toClass.headerRect.getAbsolutePosition().x;
		var x4 = this.toClass.headerRect.getAbsolutePosition().x + this.toClass.headerRect.width;

		var y1 = this.fromClass.headerRect.getAbsolutePosition().y;
		var y2 = this.fromClass.headerRect.getAbsolutePosition().y + this.fromClass.currentHeight;
		var y3 = this.toClass.headerRect.getAbsolutePosition().y;
		var y4 = this.toClass.headerRect.getAbsolutePosition().y + this.toClass.currentHeight;

		if(x2 < x3) {
			X1 = x2;
			X2 = x3;
		} else if(x3 <= x2) {
			if(x2 <= x4) {
				X1 = x2;
				X2 = x2;
			} else if(x1 <= x4) {
				if(x1 <= x3) {
					X1 = x3;
					X2 = x3;
				} else {
					X1 = x1;
					X2 = x1;
				}
			} else {
				X1 = x1;
				X2 = x4;
			}
		}

		if(y2 < y3) {
			Y1 = y2;
			Y2 = y3;
		} else if(y3 <= y2) {
			if(y2 <= y4) {
				Y1 = y2;
				Y2 = y2;
			} else if(y1 <= y4) {
				Y1 = y4;
				Y2 = y4;
			} else {
				Y1 = y1;
				Y2 = y4;
			}
		}

		var headlen = 10;

		var angle = Math.atan2(Y2 - Y1, X2 - X1);

		var X3 = X2 - headlen * Math.cos(angle - Math.PI / 6);
		var Y3 = Y2 - headlen * Math.sin(angle - Math.PI / 6);
		var X4 = X2 - headlen * Math.cos(angle + Math.PI / 6);
		var Y4 = Y2 - headlen * Math.sin(angle + Math.PI / 6);

		that.relationLine.points[0].x = X1;
		that.relationLine.points[0].y = Y1;

		that.relationLine.points[1].x = X2;
		that.relationLine.points[1].y = Y2;

		that.relationLine.points[2].x = X3;
		that.relationLine.points[2].y = Y3;

		that.relationLine.points[3].x = X2;
		that.relationLine.points[3].y = Y2;

		that.relationLine.points[4].x = X4;
		that.relationLine.points[4].y = Y4;

		that.relationLine.points[5].x = X2;
		that.relationLine.points[5].y = Y2;

		that.title.x = (that.relationLine.points[0].x + that.relationLine.points[1].x) / 2;
		that.title.y = (that.relationLine.points[0].y + that.relationLine.points[1].y) / 2;

	}
	this.onClick = function() {
		var mouseX = that.title.getAbsolutePosition().x-that.title.padding + $("#" + that.title.getStage().getContainer().id).prop("offsetLeft");
		var mouseY = that.title.getAbsolutePosition().y-that.title.padding + $("#" + that.title.getStage().getContainer().id).prop("offsetTop");
		var formString = "<div id='EditTitlePopUp' style='position:absolute;top:" + mouseY + "px;left:" + mouseX + "px;z-index:30;'>" + "<input type='text' value= '" + that.relationObj.title + "' id='titleName' autofocus style='width:" + that.title.width + "px; font-size:" + that.title.fontSize + "px;  '/>" + "<input type='button' value='save' id='saveTitleForm'>" + "<input type='button' value='cancel' id='cancelTitleForm'>" + "</div>"

		if($('#memberName').length !== 0) {
			$('#EditTitlePopUp').remove();
		}

		$("#" + that.title.getStage().getContainer().id).before(formString);
		$('input#titleName').focus();
		$('input#titleName').select();
		$('#titleName').keydown(function(event) {
			if(event.which == 13) {
				var name = $('input#titleName').val();
				that.setName(name);
				that.title.getLayer().draw();
				$('#EditTitlePopUp').remove();
			} else if(event.which == 27) {
				$('#EditTitlePopUp').remove();
			}
		});
		$('#saveTitleForm').click(function() {
			var name = $('input#titleName').val();
			that.setName(name);
			that.title.getLayer().draw();
			$('#EditTitlePopUp').remove();
		});
		$('#cancelTitleForm').click(function() {
			$('#EditTitlePopUp').remove();
		});
	}
	this.setName = function(name) {
		that.relationObj.title = name;
		that.title.text = name;
	}
	this.title.on("dblclick",this.onClick);
}